<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>css_menu</title>
	<meta name="author" content="Stark" />
	<!-- Date: 2018-10-13 -->
	<style type="text/css">
		* {
			padding: 0px;
			margin: 0px;
			font-size: 12px;
		}
		#menu_bar {
			position: absolute;
			left: 50px;
			top: 50px;
			/*
			border: 1px solid red;
			width: 500px;
			height:500px;
			*/
			
		}
		dl.menu {
			float: left;
			width: 120px;
		}
		
		dl.menu dt {
			height: 30px;
			background: #339;
			color:#fff;
			border-right: #fff 1px solid;
			text-align: center;
		}
		dl.menu dt span, dl.menu dd a {
			position: relative;
			top: 6px;
		}
		/**
		 * 	以下样式一般是最后才进行加载
		 *  所以如果在dd上面使用class之后，class会被先加载
		 *  之后才加载下面样式，所以会被覆盖
		 */
		/*dl.menu dd {
			background: #911;
			color: #fff;
			border-bottom: 1px solid #fff;
			display: none;
			cursor: pointer;
		}*/
		dd.menuItem {
			background: #911;
			color: #fff;
			border-bottom: 1px solid #fff;
			display: none;
			cursor: pointer;
			height: 30px;
			border-right: #fff 1px solid;
			text-align: center;
		}
		a.menu_href:link,a.menu_href:visited {
			text-decoration: none;
			color:#fff;
		}
		dd.hoverClass {
			background: #393;
		}
		/*dl.menu dd:hover {
			background: #393;
			cursor: pointer;
		}*/
	</style>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function(){
			// $(".menu").mouseenter(function(){
				// $(this).find("dd").css("display","block");
			// }).mouseleave(function(){
				// $(this).find("dd").css("display","none");
			// });
			
			$(".menu").hover(function(){
				$(this).find("dd").css("display","block");
			},function(){
				$(this).find("dd").css("display","none");
			});
			
			// $(".menu dd").hover(function hoverClass(){
				// $(this).addClass("hoverClass");
			// },function(){
				// $(this).removeClass("hoverClass");
			// });
			
			$(".menu dd").hover(itemHover,itemHover);
			
			function itemHover(){
				$(this).toggleClass("hoverClass");
			}
		});
	</script>
</head>
<body>
	<div id="content"></div>
	<div id="menu_bar">
		<dl class="menu">
			<dt><span>文件管理</span></dt>
			<dd class="menuItem"><a href="#1" class="menu_href">打开文件</a></dd>
			<dd class="menuItem"><a href="#1" class="menu_href">删除文件</a></dd>
			<dd class="menuItem"><a href="#1" class="menu_href">存储文件</a></dd>
			<dd class="menuItem"><a href="#1" class="menu_href">关闭文件</a></dd>
			<dd class="menuItem"><a href="#1" class="menu_href">退出系统</a></dd>
		</dl>
		<dl class="menu">
			<dt><span>编辑</span></dt>
			<dd class="menuItem"><a href="#1" class="menu_href">撤销操作</a></dd>
			<dd class="menuItem"><a href="#1" class="menu_href">拷贝</a></dd>
			<dd class="menuItem"><a href="#1" class="menu_href">粘贴</a></dd>
		</dl>
		<dl class="menu">
			<dt><span>视图</span></dt>
			<dd class="menuItem"><a href="#1" class="menu_href">打印视图</a></dd>
			<dd class="menuItem"><a href="#1" class="menu_href">浏览视图</a></dd>
			<dd class="menuItem"><a href="#1" class="menu_href">开发视图</a></dd>
		</dl>
		<dl class="menu">
			<dt><span>窗口</span></dt>
			<dd class="menuItem"><a href="#1" class="menu_href">打开窗口</a></dd>
			<dd class="menuItem"><a href="#1" class="menu_href">关闭窗口</a></dd>
			<dd class="menuItem"><a href="#1" class="menu_href">上一个</a></dd>
			<dd class="menuItem"><a href="#1" class="menu_href">下一个</a></dd>
			<dd class="menuItem"><a href="#1" class="menu_href">显示</a></dd>
		</dl>
	</div>
</body>
</html>

